About Bedandbathoutlet
Bedandbathoutlet is a family-owned and operated business with over 30 years of experience managing a large physical store. They offer an extensive selection of top-quality brand names of home and household products at the lowest price in the United States.
In this case study our team designed wireframes in high fidelity, with click-through prototypes developed simultaneously. Here is a sample mockup displaying a part of this design, but you can scroll down and read more.
Problem Statement
The business owner reached out for a website redesign to better present their brand offerings, expand their client base, and drive more traffic to the website to increase online sales.
The current website is very outdated and doesn’t offer much information. Three major problems with the website are:
1. Confusion in product categories exhausts users from finding and purchasing an item.
2. The lack of enough product information has resulted in a bounce and clients leaving the page immediately.
3. Use of Poor and inconsistent visual design and low-quality pictures
Design Goals
1. Easy access to information
2. Intuitive user experience
3. Attract new customers
We conducted our research in three phases:
Phase 1: Heuristic evaluation
Phase 2: Competitive analysis
Phase 3: Interview
Heuristic Evaluation
To develop and address the current website's pain points, we ran an online usability test with a few users. Our observations showed several repetitive problems which have resulted in inconvenience to user experience.
Findings
The following are a few results of our investigation.
1. There are no calls to action on the hero image, which does not offer any information to users. Moreover, using low-quality images affects the quality of the brand.
2. The navigation hierarchy is confusing and unclear. The content is inconsistent.
3. Frequently misaligned and unbalanced photos, texts, and call-to-action buttons.
4. Insufficient mixed product photos on most of the product pages.
5. Irrelevant images for a specific product are shown, which makes it confusing for users.
6. Most product pages do not cover consistency and standards in design and content.
7. Users have to type the quantity number of a selected item in the quantity input, which might make the process longer and more annoying.
8. Shown images on the product pages do not match the product description.
Heuristic Evaluation findings
Competitive Analysis
During the research process, we reviewed eight competitor websites that are similar to bedandbathoutlet to investigate the strengths and weaknesses of the current website.
Some results
As we analyzed the competitor websites, we discovered the bedandbathoutlet website lacked many features, however, we discussed with the owner on the main features that are necessary for an E-commerce website Here are some results:
1. Product information and high-quality images of the product are a must. So the picture quality should change to a higher quality.
2. Showing the feature of gift box wrapping as one of the business VPs has been considered a strength of the current website despite not having this feature on the other websites.
3. To satisfy marketing goals, Social media links are accessible on the platform.
4. The filtering product feature is also needed for a better user experience in finding a specific product. So we convinced the owner to add other filter items to the price filter.
Competitive Analysis Table
Interview
We interviewed eight potential users (they all had the experience of shopping online from home appliances sellers' websites) to learn about users' views and needs about online shopping through B&B's website.
Below is a list of the interviewees' main needs and concerns.
Below is a list of the interviewees' main needs and concerns.
1. Seeing high-quality and large images of the products
2. Easy filter based on product characteristics
3. Set items
4. Seasonal sale offers
5. Easy search
6. favourite list
Interviewees' statements
Card Sorting
To make sure that the site’s information architecture is aligned with user expectations, we had two card sorting sessions (Closed type) using Figmajam. Our goal was to find smaller, intuitive groupings for the existing 36 product categories. After organizing the data, we ended up with 6 clearly defined main categories with 4-7 subcategories in each.
Site Map
After the interview with the participants and cart sorting, the results were analyzed and the first version of the website’s IA was created. The IA of the BedandBathoultlet was aligned with the user’s categories and needs many stated during the interview. Our customer’s top needs are defined as:
1. Finding an item through the navigation menu as much easy as possible
2. Getting enough information about products and return policy as well.
3. Seeing the image product in the close shot and several positions
4. Seeing seasonal and on-sale offers on the homepage
5. Seeing set items
Persona
Based on our research, interviews, and card sorting the persona was created. We will redesign the website based on our persona's needs and preferences.
1. Emma is a professional architect who is recognized for her design with low-budget investment.
2. She is looking for bathroom set items to make harmony in her bathroom which has been redesigned by herself recently.
3. Fast delivery and an easy return policy are two factors for her perfectionist character in selecting a website to shop online.
user flow
Ideation and wireframes
The redesign decision that we made is based on the pain points and solutions table:
*Solutions are marked in the mid-fi wireframes, shown below
Usability & Iteration (phase 1)
1. In the first usability test, we found out our users tend to see the “New In” section in every category.
2. The “sale offers” is the first section that users wanted to explore. So we changed the layout and shifted it to the top place.
3. Users' usability test led us to replace the single product with popular subcategories in the “Best-seller” section. We also understood “Best-seller” section is the second important section for users to explore. So we put this part after the sale section.
4. To keep consistency and minimal design on the page, with the approval of our stakeholder, we moved “the subscribe form” to the footer.
2. The “sale offers” is the first section that users wanted to explore. So we changed the layout and shifted it to the top place.
3. Users' usability test led us to replace the single product with popular subcategories in the “Best-seller” section. We also understood “Best-seller” section is the second important section for users to explore. So we put this part after the sale section.
4. To keep consistency and minimal design on the page, with the approval of our stakeholder, we moved “the subscribe form” to the footer.
Final Homepage wireframe after usability test
UI Design
Once the usability issues were resolved, we moved on to design the final screens in Figma. Since our stakeholders did not intend to change their logo, we were entitled to use the current logo colors. So we chose a warm color for the new design.
Tawny Port color is primarily a color from the Red color family. It is associated with passion, intensity, trust and energy; however, it is more commonly used to increase the audience's heart rate and create an instinctive response.
This color highlighted the page while bringing energy and power to it. It is also a strong motivational color, which calls the users to take an action. Owing to the strong effect that the red color has on the users, it is being widely used by e-commerce websites.
Tawny Port color is primarily a color from the Red color family. It is associated with passion, intensity, trust and energy; however, it is more commonly used to increase the audience's heart rate and create an instinctive response.
This color highlighted the page while bringing energy and power to it. It is also a strong motivational color, which calls the users to take an action. Owing to the strong effect that the red color has on the users, it is being widely used by e-commerce websites.
High-fidelity wireframes
Home page, bestseller/Towels page, Price filter page
Size & color filter page, Quick view page
Review Basket, Log in
Usability & Iteration (phase 2)
After creating high fidelity prototype, we decided to test the website with three users. Here are the applied changes based on users' feedback.
High-fidelity Prototype
What I have learned...
As a team member, I learned that constant communication with team members and client is the key point to avoiding misunderstanding especially when the project is still in the early stages.
As a UX designer, I learned, documenting the history of iterations and archiving all design solutions presented during the project, is helpful in saving time and preventing reworking.
Overall, this project has deepened my understanding of user-centered design principles and equipped me with valuable skills for future design projects.
Next steps
Working on website accessibility.
Designing mobile mode.
Adding AR feature.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.
...or just say hello on my social media.
